<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu

      active-text-color="#A8ABB2"
      background-color="#a0cfff"
      class="el-menu-demo"
      mode="horizontal"
      text-color="#fff"
  >
    <el-menu-item index="1">首页</el-menu-item>

    <el-menu-item disabled index="2">帮助与支持</el-menu-item>
    <el-menu-item index="3">退出</el-menu-item>


    <div class="avatar">
      <div class="block">
        <el-dropdown>
          <el-avatar :size="55"/>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>退出</el-dropdown-item>
              <el-dropdown-item>个人中心</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>


  </el-menu>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <h4 class="mb-2">水电费预缴费系统</h4>
          <el-row>
    <el-col :span="3">
      <el-menu
          class="el-menu-vertical-demo"
          default-active="2"
          @close="handleClose"
      >
        <el-menu-item index="1">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-menu-item index="2">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>消息中心</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>预交费</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>账单</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>个人信息</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
        </el-aside>
        <el-main>
          <div class="mt-4">
    <el-row>
      <el-col :span="12">
        <el-input
      v-model="input2"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #append>
        <el-button :icon="Search">搜索</el-button>
      </template>
    </el-input>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-button type="danger">删除</el-button>
    </el-row>
  </div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="time" label="账单时间" width="180" />a
      <el-table-column prop="water" label="用水量" width="100" />
      <el-table-column prop="water_price" label="水费" width="100" />
      <el-table-column prop="electrical" label="用电量" width="100" />
      <el-table-column prop="electrical_price" label="电费" width="100" />
      <el-table-column prop="total" label="账单金额" width="100" />
      <el-table-column prop="pay_status" label="是否缴费" width="100" />
      <el-table-column prop="pay_time" label="缴费时间" width="180" />
    </el-table>
  <el-row justify="center">
      <el-pagination background layout="prev, pager, next" :total="1000" />
  </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script lang="ts" setup>
import { ref,reactive,defineComponent } from 'vue'
import { ElMessageBox } from 'element-plus'
import { Search,Document, Location, Setting} from '@element-plus/icons-vue'

const form = reactive({
  name: '',
  address: '',
  telephone:''
})
const input1 = ref('')
const input2 = ref('')
const select = ref('')
const handleClick = () => {
  console.log('click')
}

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const tableData = [
  {
      time: '2021-01-01',
      water: '100',
      electrical: '100',
      water_price: '100',
      electrical_price: '100',
      total: '200',
      pay_status: '是',
      pay_time: '2021-01-01',
  },
  {
      time: '2021-01-01',
      water: '100',
      electrical: '100',
      water_price: '100',
      electrical_price: '100',
      total: '200',
      pay_status: '是',
      pay_time: '2021-01-01',
  },
  {
      time: '2021-01-01',
      water: '100',
      electrical: '100',
      water_price: '100',
      electrical_price: '100',
      total: '200',
      pay_status: '是',
      pay_time: '2021-01-01',
  },

]
</script>

<script lang="ts">
export default defineComponent({
  components: {Location, Document, Setting}
})
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>

<style scoped>
.mb-2{
  margin-top: 50px;
  margin-left: 10px;
}
.avatar {
  border: #4d4343 solid 1px;
  width: 79%;
  display: flex;
  justify-content: flex-end;
}
</style>
